<template>
	<view class="main-page">
		<view class="tab-content">
      <activityVue v-if="activeTab === 0" />
      <rankVue v-if="activeTab === 1" />
      <giftVue v-if="activeTab === 2" /> <!-- 新增礼物页面 -->
      <profileVue v-if="activeTab === 3" />
		</view>
		<up-tabbar :value="activeTab" @change="onTabChange" fixed safe-area-inset-bottom>
			<up-tabbar-item text="活动" icon="calendar" />
			<up-tabbar-item text="排行榜" icon="level" />
      <up-tabbar-item text="礼物" icon="gift" /> <!-- 新增 tab -->
      <up-tabbar-item text="个人信息" icon="account" />
		</up-tabbar>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import activityVue from '../activity/activity.vue'
	import profileVue from '../profile/profile.vue'
	import rankVue from '../rank/rank.vue'
  import giftVue from '../gift/gift-list.vue' // ✅ 新增导入


  const activeTab = ref(0)
	const onTabChange = (index : number) => {
		activeTab.value = index
	}
</script>

<style scoped lang="scss">
	.main-page {
		min-height: 100vh;
		background: #f5f6fa;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}

	.tab-content {
		flex: 1;
		padding-bottom: 120rpx;
	}

	.tab-inner {
		padding: 40rpx 28rpx 0 28rpx;
	}
</style>